import { useEffect, useRef, useState } from 'react'
import styles from './style.module.css'
import { Avatar } from 'antd'
import { useDispatch } from 'react-redux'
import { setUserId } from '@/store/UserSlice'
import { useNavigate } from 'react-router'
import clsx from 'clsx'
import { formatDate } from 'date-fns'
import { getBirthDate } from './getBirthDate'

type IListItem = {
    data?: any;
    birth?: boolean;
    selecte?: (index: any, value: boolean) => void;
    index?: number
}

function ListItem({ data, birth = false, selecte, index }: IListItem) {
    const birthTime = birth && (new Date('2025-' + formatDate(new Date(data.birthday), 'MM-dd')).getTime() - new Date(new Date().setHours(0, 0, 0, 0)).getTime())
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [avatarVisible, setAvatarVisible] = useState(true)
    const avatarRef = useRef(null)
    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                setAvatarVisible(true)
            } else {
                setAvatarVisible(false)
            }
        }, { threshold: 0 })

        if (avatarRef.current) observer.observe(avatarRef.current)
    }, [])

    return (
        <>
            <div
                className='flex'
                style={{ borderBottom: '1px solid #E7EBEF ' }}
            >
                {birth && <div>
                    {!data.selected ? <div
                        className="ml-[31px] w-[36px] h-[36px] mt-[45px] overflow-hidden"
                        style={{
                            border: '1px solid #999',
                            borderRadius: '50%'
                        }}
                        onClick={() => {
                            if (selecte) {
                                selecte(index, true)
                            }
                        }}
                    ></div> :
                        <svg
                            className="icon ml-[31px] w-[36px] h-[36px] mt-[45px]"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="1632" width="200"
                            height="200"
                            style={{
                                borderRadius: '50%'
                            }}
                            onClick={() => {
                                if (selecte) {
                                    selecte(index, false)
                                }
                            }}>
                            <path
                                d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
                                fill="#389BFF"
                                p-id="1633" />
                        </svg>}
                </div>}
                <div
                    key={data.id}
                    className="h-[120px] pt-[15px] flex"
                    onClick={() => {
                        dispatch(setUserId(data.id))
                        navigate('/info')
                    }}
                >
                    {typeof data.url === 'string'
                        && data.url
                        && <div ref={avatarRef}>
                            {avatarVisible
                                ? <Avatar
                                    src={data.url}
                                    className={styles.avatar}
                                />
                                : <div
                                    className={clsx(`
                                        skeleton
                                    `, styles.avatar)}
                                >
                                </div>
                            }
                        </div>
                    }
                    <div>
                        <p
                            className="flex h-[30px] text-[30px] mb-[20px] leading-[30px] mt-[8px]"
                        >
                            <span>{data.nickname}</span>
                            {birth && <span
                                className='text-[26px] leading-[30px] ml-[15px]'
                                style={{ color: getBirthDate(birthTime).color }}
                            >
                                {getBirthDate(birthTime).text}
                            </span>}
                        </p>
                        <p
                            className="h-[24px] text-[24px] leading-[24px]"
                            style={{ color: "#666666" }}
                        >
                            {data.phone}
                        </p>
                    </div>
                </div >
            </div>
        </>
    )
}
export default ListItem
